<template>
	<view class="cu-modal" :class="{ show: show }">
		<!-- <view class="cu-dialog"> -->
			<view class="coupon-window">
				<view class="couponWinList">
					<view class="flex justify-center coupon-item" v-for="(item, index) in couponList" :key="index">
						<view class="stamp stamp01">
							<view class="par">
								<text>{{ item.name }}</text>
								<!-- 判断优惠券类型 1:折扣 -->
								<view class="block" v-if="item.type">
									<text class="sign">￥</text>
									<text class="price">{{ item.discount }}</text>
									<text class="sub">折</text>
								</view>
								<!-- 判断优惠券类型 0:立减 -->
								<view class="block" v-else>
									<text class="sign">￥</text>
									<text class="price">{{ item.subtract_price }}</text>
									<text class="sub">立减</text>
								</view>
								<text>{{ item.full_price > 0 ? `订单满${item.full_price}元使用` : '无门槛优惠券' }}</text>
							</view>
							<i class="i"></i>
						</view>
					</view>
				</view>
				<view class="lid">
					<navigator hover-class="none" :url="'/user-pages/activity-details?id=' + activityId" class="bnt font-color">立即领取</navigator>
					<view class="cuIcon-close iconfont" @tap="close"></view>
				</view>
			</view>
		<!-- </view> -->
	</view>
</template>

<script>
export default {
	props: {
		value: {},
		couponList: {
			type: Array,
			value: []
		},
		activityId: {}
	},
	data() {
		return {
			show: false
		};
	},
	watch: {
		value(value) {
			this.show = value;
		},
		show(value) {
			this.$emit('input', value);
		}
	},
	methods: {
		close: function() {
			this.show = false;
			this.$emit('onColse');
		}
	}
};
</script>

<style lang="scss" scoped>
.coupon-window {
	background-image: url();
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 573rpx;
	height: 649rpx;
	position: fixed;
	top: 1500rpx;
	z-index: 99;
	left: 50%;
	margin-left: -277rpx;
	transform: translate3d(0, -200%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.coupon-window.on {
	transform: translate3d(0, 0, 0);
}
.coupon-window .couponWinList {
	width: 480rpx;
	margin: 157rpx 0 0 45rpx;
	height: 415rpx;
	overflow: auto;
}
.coupon-window .lid {
	background-image: url();
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 573rpx;
	height: 224rpx;
	position: fixed;
	left: 50%;
	top: 20%;
	margin: 424rpx 0 0 -285rpx;
}
.coupon-window .lid .bnt {
	font-size: 29rpx;
	width: 440rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: #f9f1d3;
	text-align: center;
	line-height: 80rpx;
	font-weight: bold;
	margin: 80rpx auto 0 auto;
}
.coupon-window .lid .iconfont {
	color: #fff;
	font-size: 60rpx;
	text-align: center;
	margin-top: 87rpx;
}
.coupon-item {
	.stamp:before {
		content: '';
		position: absolute;
		background-color: #FFF;
		top: 0;
		bottom: 0;
		left: 10px;
		right: 10px;
		z-index: 0;
	}
	.stamp:after {
		content: '';
		position: absolute;
		left: 10px;
		top: 10px;
		right: 10px;
		bottom: 10px;
		box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
		z-index: -1;
	}
	.stamp {
		background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #FFF 4px);
		background-size: 15px 15px;
		background-position: 9px 3px;
		// border-radius: 10px;
		width: 460rpx;
		height: 150rpx;
		padding: 0 10rpx;
		margin-bottom: 16rpx;
		position: relative;
		overflow: hidden;
		.par {
			float: left;
			padding: 10rpx 30rpx;
			width: 400rpx;
			border-right: 4rpx dashed rgba(23, 37, 117, 0.3);
			text-align: left;
			z-index: 2;
			position: relative;
			text {
				color: #172575;
				font-size: 26rpx;
			}
			.price {
				font-size: 26px;
				color: #172575;
				margin-right: 10rpx;
				font-weight: 600;
			}
			.sign {
				font-size: 26rpx;
				font-weight: 600;
			}
			.sub {
				font-size: 26rpx;
				position: relative;
				top: -10rpx;
				color: #172575;
			}
		}
		.copy {
			display: inline-block;
			padding: 30rpx 0 30rpx 20rpx;
			width: 200rpx;
			vertical-align: text-bottom;
			font-size: 28rpx;
			color: rgb(255, 255, 255);
			text-align: center;
			line-height: initial;
			position: relative;
			z-index: 2;
		}
	}
	.stamp .i {
		position: absolute;
		left: 20%;
		top: 45px;
		height: 190px;
		width: 390px;
		background-color: rgba(255, 255, 255, 0.15);
		transform: rotate(-30deg);
	}
}
</style>
